<template>
  <div>
    <el-form>
      <el-form-item label="ID">
        <el-input v-model.trim="user.id" readonly />
      </el-form-item>
      <el-form-item :label="$t('common.avatar')">
        <el-row>
          <el-col :span="5">
            <el-image
              fit="cover"
              style="width: 100px; height: 100px;cursor: pointer"
              :src="user.avatar"
              :preview-src-list="[user.avatar]"
            >
              >
              <div slot="error" class="image-slot">
                <svg-icon icon-class="user" style="font-size: 50px" />
              </div>
            </el-image>
          </el-col>
          <el-col :span="8">
            <el-button @click="clickAvatar">{{ $t('common.changeAvatar') }}</el-button>
          </el-col>
        </el-row>
        <DialogResource
          :dialog-resource-visible="dialogResourceVisible"
          @closeDialogResource="closeDialogResource"
          @selectResourceClick="selectResourceClick"
        />
      </el-form-item>
      <el-form-item :label="$t('common.name')">
        <el-input v-model="user.username" :placeholder="$t('common.pleaseEnterContent')" class="input-with-select">
          <el-button slot="append" icon="el-icon-edit" @click="updateUsername">{{ $t('common.modifyNow') }}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('common.phoneNumber')">
        <el-input v-model.trim="user.mobile" readonly>
          <el-button slot="append" icon="el-icon-edit" @click="dialogMobile = true">{{ mobileButtonText }}</el-button>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('common.email')">
        <el-input v-model.trim="user.email" readonly>
          <el-button slot="append" icon="el-icon-edit" @click="dialogEmail = true">{{ emailButtonText }}</el-button>
        </el-input>
      </el-form-item>

      <el-form-item :label="$t('common.lastLoginIp')">
        {{ user.last_login_ip }}
      </el-form-item>
      <el-form-item :label="$t('common.lastLoginTime')">
        {{ user.last_login_time }}
      </el-form-item>
      <el-form-item :label="$t('common.creationTime')">
        {{ user.create_time }}
      </el-form-item>
      <el-form-item>
        <!--      <el-button type="primary" @click="submit">修改</el-button>-->
      </el-form-item>
    </el-form>
    <BindMobile v-if="dialogMobile" :dialog-mobile="dialogMobile" :mobile="user.mobile" @onClose="onCloseDialogMobile" />
    <BindEmail v-if="dialogEmail" :dialog-email="dialogEmail" :mobile="user.email" @onClose="onCloseDialogEmail" />
  </div>
</template>

<script>
import DialogResource from '../../resource/components/DialogResource'
import { update } from '@/api/merchant'
import BindMobile from './BindMobile.vue'
import BindEmail from './BindEmail.vue'
export default {
  components: { DialogResource, BindMobile, BindEmail },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          email: '',
          mobile: '',
          avatar: ''
        }
      }
    }
  },
  data() {
    return {
      imageUrl: '',
      dialogResourceVisible: false,
      mobileButtonText: '',
      emailButtonText: '',
      dialogMobile: false,
      dialogEmail: false
    }
  },
  mounted() {
    this.getMobileButtonText()
    this.getEmailButtonText()
  },
  methods: {
    submit() {

    },
    getMobileButtonText() {
      this.mobileButtonText = (this.user.mobile) ? this.$t('common.updateMobilePhoneNumber') : this.$t('common.bindMobilePhoneNumber')
    },
    getEmailButtonText() {
      this.emailButtonText = (this.user.email) ? this.$t('common.changeMailbox') : this.$t('common.bindMailbox')
    },
    clickAvatar() {
      this.dialogResourceVisible = true
    },
    closeDialogResource({ dialogResourceVisible }) {
      this.dialogResourceVisible = dialogResourceVisible
    },
    selectResourceClick({ select }) {
      if (!select?.name_url) {
        return
      }
      this.user.avatar = select.name_url
      update({
        avatar: select.url
      }).then(res => {
        this.$message({
          message: res.message,
          type: 'success',
          duration: 1 * 1000
        })
        this.$store.dispatch('user/getInfo')
      })
    },
    updateUsername() {
      update({
        username: this.user.username
      }).then(res => {
        this.$message({
          message: res.message,
          type: 'success',
          duration: 1 * 1000
        })
        this.$store.dispatch('user/getInfo')
      })
    },
    onCloseDialogMobile() {
      this.dialogMobile = false
    },
    onCloseDialogEmail() {
      this.dialogEmail = false
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
